<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<el-table :data="tableList">
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="备注" align="center" prop="content" />
			<el-table-column label="操作人" align="center">
				<template #default="scope">{{ scope.row.username || '后台人员' }}</template>
			</el-table-column>
			<el-table-column label="录入时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { orderSelectRemarks } from '/@/api/admin1';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

export default {
	name: 'OrderRemarkViewDialog',
	setup() {
		const state = reactive({
			title: '订单备注',
			open: false,
			tableList: [],
		});

		/********** 点击事件(on开头) **********/

		/********** 方法事件 **********/
		// 打开
		const openDialog = (config: any) => {
			console.log(config);
			state.open = true;
			_orderSelectRemarks(config);
		};

		/********** 网络请求 **********/
		// 查看订单备注
		const _orderSelectRemarks = (_data: any) => {
			orderSelectRemarks(_data)
				.then((res) => {
					state.tableList = res.data.list;
				})
				.catch(() => {});
		};

		return {
			openDialog,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped>
.theme-2 {
	border: 1px solid #ebeef5;
	border-bottom: 0;
	margin-bottom: 20px;
	.el-tag {
		margin-right: 10px;
	}
	.img_sku-item {
		display: inline-block;
		margin-right: 30px;
		vertical-align: middle;
		.img_sku-item__upload {
			width: 94px;
			height: 94px;
			margin-top: 6px;
			padding: 4px;
			border: 1px solid #e5e5e5;
			border-radius: 4px;
			background-color: #fff;
			position: relative;
			margin-bottom: 10px;

			.arrow {
				position: absolute;
				width: 0;
				height: 0;
				top: -8px;
				left: 10%;
				border-style: solid;
				border-color: transparent;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 5px solid #333;

				&::after {
					position: absolute;
					display: block;
					width: 0;
					height: 0;
					top: 0;
					margin-left: -10px;
					border-color: transparent transparent #fff;
					border-style: solid;
					border-width: 0 10px 10px;
					content: '';
				}
			}

			.el-image,
			.img-uploader,
			.uploader-icon {
				width: 84px;
				height: 84px;
			}

			.uploader-icon {
				line-height: 84px;
				font-size: 30px;
			}

			.el-image {
				display: block;
			}
		}
	}
}
.required_title::before {
	content: '*';
	color: #f56c6c;
}
</style>
